import React from "react";
import { Tabs, Input } from "antd";
import type { TabsProps } from "antd";
import { FormData, LyricTypeEnum } from "./components";
import { useMemoizedFn } from "ahooks";
export type { LyricTypeEnum, FormData } from "./components";
const TextArea = Input.TextArea;
const placeholderText = `[ar:艺术家]
[al:专辑名称]
[ti:歌曲标题]
[au:作曲者]
[length:长度]
[by:歌词制作人]
[offset:0]
[re:发行公司]
[ve:完整版]

[00:00.00]  这是歌曲的第一句歌词
[00:10.00]  这是第二句歌词
[00:20.00]  这里是第三句歌词
[00:30.00]  歌词继续……
[00:40.00]  直到歌曲结束
`;

interface AppPropsInt {
  value: FormData;
  onChage?: (value: FormData) => void;
}

const App: React.FC<AppPropsInt> = (props) => {
  const onTextChange = (text: string) => {
    if (props.onChage) {
      props.onChage({
        ...props.value,
        text: text as LyricTypeEnum,
      });
    }
  };

  const items: TabsProps["items"] = [
    {
      key: LyricTypeEnum.text,
      label: "预置歌词输入",
      children: (
        <TextArea onChange={(e) => onTextChange(e.target.value)} rows={10} />
      ),
    },
    {
      key: LyricTypeEnum.lyric,
      label: "LRC文本编辑",
      children: (
        <TextArea
          onChange={(e) => onTextChange(e.target.value)}
          placeholder={placeholderText}
          rows={10}
        />
      ),
    },
  ];

  const onTabsChange = useMemoizedFn((key: string) => {
    console.log("key-->", key);
    if (props.onChage) {
      props.onChage({
        ...props.value,
        lyricType: key as LyricTypeEnum,
      });
    }
  });

  return (
    <>
      <Tabs
        activeKey={props.value.lyricType}
        items={items}
        onChange={onTabsChange}
      />
    </>
  );
};

export default App;
